import {
    Card, Form, Input, Button, Table, Modal, Spin
} from 'antd';
import api from '@/framework/axios';//请求接口的封装
import Util from '@/util/util'
import BaseForm from '@/components/baseForm';
import AuthButton from '@/components/authButton'
import ModalForm from './modalForm';
import less from './index.less';

class Menu extends React.Component {
    state = {
        loading: false,
        parentIds: [],
        dataSource: {},
        selectedRowKeys: [],
        modal: {
            show: false,
        }
    }

    formList = [
        {
            type: 'INPUT',
            field: 'name',
            label: '菜单名',
            placeholder: '菜单名'
        }
    ]

    params = {
        pageSize: 10,
        page: 1
    }

    componentWillMount() {
        this.tableSearch();
    }

    tableSearch = () => {
        let _this = this;
        if (this.state.loading) return false;//如果加载中退出
        this.setState({
            loading: true,
        })

        api.ajax('GET', '@/sys/menu', {
            ...this.params,
        }).then(r => {
            this.setState({
                loading: false,
                selectedRowKeys: [],
                dataSource: r,
                pagination: Util.pageination(r, (current) => {
                    _this.params.page = current;
                    _this.tableSearch();
                }, (current, pageSize) => {
                    _this.params.page = current;
                    _this.params.pageSize = pageSize;
                    _this.tableSearch();
                })
            })
        }).catch(r => {
            this.setState({
                loading: false,
            })
        })
    }

    handleFilter = (params) => {
        //根据formList生成的表单输入条件过滤
        this.params = {
            ...this.params,
            ...params,
        }
        this.tableSearch();
    }

    handleFilterById = (id) => {
        //根据id查询子菜单
        this.params = {
            ...this.params,
            id: id
        }
        const parentIds = [...this.state.parentIds];
        parentIds.push(id);
        this.setState({
            parentIds
        });
        this.tableSearch();
    }

    handleFilterBackId = () => {
        //根据id查询子菜单--返回上一级
        let parentIds = [...this.state.parentIds];
        parentIds.pop();
        const id = parentIds.length > 0 ? parentIds[parentIds.length - 1] : '';
        this.params = {
            ...this.params,
            id: id
        }
        this.tableSearch();
        this.setState({
            parentIds
        });
    }

    add = () => {
        this.openModal(true);
    }

    edit = () => {
        console.log(this.state.selectedRowKeys);
    }

    del = () => {
        console.log(this.state.selectedRowKeys);
    }

    openModal = (ok) => {
        let show = ok ? true : false;
        this.setState({
            modal: {
                ...this.state.modal,
                show
            }
        })
    }
    modalHandle = (ok, params) => {
        if (ok) {
            console.log(params);
            this.openModal(!ok)
        } else {
            this.openModal(ok)
        }
    }

    goBackBtn = () => {
        //当查询子菜单时 
        if (this.state.parentIds.length > 0) {
            return <Button onClick={this.handleFilterBackId}>返回</Button>
        } else {
            return null
        }
    }

    columns = () => {
        let _this = this;
        return [{
            title: '菜单名',
            dataIndex: 'name',
            key: 'name',
            width: 200
        }, {
            title: '排序',
            dataIndex: 'rank',
            key: 'rank',
            width: 200
        }, {
            title: '地址',
            dataIndex: 'url',
            key: 'url',
            width: 200
        }, {
            title: '操作',
            width: 200,
            key: 'id1',
            render: (text, record) => (
                <span>
                    <a href="javascript:void(0)" onClick={() => this.handleFilterById(record.id)}>子菜单查询</a>
                </span>
            ),
        }]
    }

    render() {

        const { selectedRowKeys } = this.state;
        const rowCheckSelection = {
            type: 'checkbox',
            selectedRowKeys,
            onChange: (selectedRowKeys) => {
                this.setState({
                    selectedRowKeys
                })
            }
        }
        return (
            <div>
                <Card>
                    <BaseForm formList={this.formList} filterSubmit={this.handleFilter} />
                </Card>
                <Card>
                    <div className={less.operation_btns} key="1">
                        {/* Tool_Button */}
                        <AuthButton authName="add" type="primary" onClick={this.add}>新增</AuthButton>
                        <AuthButton authName="edit" type="primary" onClick={this.edit}>修改</AuthButton>
                        <AuthButton authName="del" type="primary" onClick={this.del}>删除</AuthButton>
                        {this.goBackBtn()}
                    </div>
                    <Table
                        {...ComponentDefine.table_}
                        rowKey="id"
                        pagination={this.state.pagination}
                        loading={this.state.loading}
                        dataSource={this.state.dataSource.result}
                        rowSelection={rowCheckSelection}
                        columns={this.columns()}
                    />
                </Card>
                {/* modal */}
                <ModalForm
                    title="菜单管理"
                    visible={this.state.modal.show}
                    onOk={this.modalHandle}
                />
            </div>
        )
    }
}

export default Menu